<template>
    <div class="process1">
        <div class="finger">
            点击这里
            <img src="@/static/finger.svg" alt="">
        </div>
        <img src="@/static/baoxiang.png" :class="baoxiangstyle" alt="" @click="open">
        <img class="rewarddetail" :class="rewarddetailstyle"
            :src="`${config.imgTarget}/reward/${route.query.reward}.png`" alt="" @click="entersmall">
        <div class="awardword" v-show="baoxiangstyle=='baoxiang roate'"> 小朋友请点开宝箱</div>
    </div>
</template>

<script setup>
import config from '../../config/config.js'
import { ref, onMounted } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import api from '@/api/user'
import { useAuthStore } from '../../store/index';
import openx from "@/static/open.mp3";
const store = useAuthStore();
const route = useRoute();
const router = useRouter();
const baoxiangstyle = ref("baoxiang roate");
const rewarddetailstyle = ref("");

onMounted(() => {
    store.settopics([]);
    store.resetnowtopic();
    store.setcorrectnum(0);
    if (store.nowlevel == route.query.proccess) {
        api.putprocess({
            remainingLevels: -1
        }).then((res) => {
            console.log(res);
        })
    }

})
const entersmall=()=>{
    console.log(route.query.proccess % 8 != 0 ? Math.floor(route.query.proccess / 8) : route.query.proccess / 8 - 1);
    router.push({
                name: "smallcontroller",
                query: {
                    number: route.query.proccess % 8 != 0 ? Math.floor(route.query.proccess / 8) : route.query.proccess / 8 - 1

                }
            })
}
const open = () => {
    let audio=new Audio(openx)
    audio.play()
    baoxiangstyle.value = "baoxiang disappear";
    rewarddetailstyle.value = "rewarddetail expand";
}
</script>

<style lang="scss" scoped>
.finger {
  position: absolute;
  display: flex;
  left: 14rem;
  top: 3rem;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: red;
  font-weight: 900;

  img {
    transform: rotate(135deg);
  }
}
.process1 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('@/static/processback.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    .baoxiang {
        width: 30rem;
        height: 20rem;

        &.disappear {
            animation: fadeOut 0.5s forwards;
        }
    }

    .roate {
        animation: rotate 1s infinite;
    }

    .quickroate {
        animation: rotate 0.2s infinite;
    }

    .rewarddetail {
        width: 0;
        height: 0;
        opacity: 0;

        &.expand {
            animation: expand 1s forwards;
        }
    }
    .awardword {
        // position: absolute;

        margin: 0 auto;
        border: #875a44 solid 4px;
        font-size: 3rem;
        background-color: #fbe8a3;
    }
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        25% {
            transform: rotate(10deg);
        }

        50% {
            transform: rotate(0deg);
        }

        75% {
            transform: rotate(-10deg);
        }

        100% {
            transform: rotate(0deg);
        }
    }

    @keyframes expand {
        0% {
            width: 0;
            height: 0;
            opacity: 0;
            transform: translateY(0);
        }

        100% {
            width: 20rem;
            height: 20rem;
            opacity: 1;
            transform: translateY(-10rem);
        }
    }

    @keyframes fadeOut {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
}
</style>
